<template>

  <t-head-menu class="container" expand-type="popup">
    <template #logo>
        <img v-if="!themeMode.isLight" alt="logo" class="logo" height="28" src="../../assets/images/logo_light.svg" @click="router.push('/')" />
        <img v-else alt="logo" class="logo" height="28" src="../../assets/images/logo_dark.svg" @click="router.push('/')" />
    </template>


    <t-submenu v-if="show800" class="submenu" title="关于系统" value="1">
      <t-menu-item value="1-1">系统介绍</t-menu-item>
      <t-menu-item value="1-2">授权原理</t-menu-item>
      <t-menu-item value="1-3">授权对象</t-menu-item>
      <t-menu-item value="1-4">更新日志</t-menu-item>
      <t-menu-item value="1-5">开发文档</t-menu-item>
      <t-menu-item value="1-6">版权声明</t-menu-item>
      <t-menu-item value="1-7">隐私政策</t-menu-item>
      <t-menu-item value="1-8">常见问题</t-menu-item>
    </t-submenu>
    <t-menu-item v-if="show800" class="submenu" value="2" href="/market" target="_blank">应用市场</t-menu-item>
    <t-submenu v-if="show1000" class="submenu" title="官方账号" value="3">
      <t-menu-item value="3-1" href="https://blog.csdn.net/qq_63573498?spm=1010.2135.3001.5343" target="_blank">CSDN</t-menu-item>
      <t-menu-item value="3-2" href="https://space.bilibili.com/170031396?spm_id_from=333.1007.0.0" target="_blank">bilibili</t-menu-item>
      <t-menu-item value="3-3" href="https://www.xiaohongshu.com/user/profile/61ac6a7b0000000021029518?m_source=pinpai" target="_blank">小红书</t-menu-item>
      <t-menu-item value="3-4" href="https://github.com/maomaojiujiu" target="_blank">Github</t-menu-item>
      <t-menu-item value="3-5" href="https://gitee.com/c18264598093" target="_blank">Gitee</t-menu-item>
    </t-submenu>
    <t-submenu v-if="show1000" class="submenu" title="云产品" value="4">
      <t-menu-item value="1-1">系统介绍</t-menu-item>
      <t-menu-item value="1-2">授权原理</t-menu-item>
      <t-menu-item value="1-3">授权对象</t-menu-item>
      <t-menu-item value="1-4">更新日志</t-menu-item>
      <t-menu-item value="1-5">开发文档</t-menu-item>
      <t-menu-item value="1-6">版权声明</t-menu-item>
      <t-menu-item value="1-7">隐私政策</t-menu-item>
      <t-menu-item value="1-8">常见问题</t-menu-item>
    </t-submenu>
    <t-submenu v-if="show1200" class="submenu" title="技术服务" value="5">
      <t-menu-item value="5-1">vue开发</t-menu-item>
      <t-menu-item value="5-2">nest开发</t-menu-item>
      <t-menu-item value="5-3">授权对象</t-menu-item>
      <t-menu-item value="1-4">更新日志</t-menu-item>
      <t-menu-item value="1-5">开发文档</t-menu-item>
      <t-menu-item value="1-6">版权声明</t-menu-item>
      <t-menu-item value="1-7">隐私政策</t-menu-item>
      <t-menu-item value="1-8">常见问题</t-menu-item>
    </t-submenu>
    <t-submenu v-if="show1200" class="submenu" title="巨人肩膀" value="6">
      <t-menu-item value="6-1" href="https://nestjs.com" target="_blank">Nest.js</t-menu-item>
      <t-menu-item value="6-2" href="https://cn.vuejs.org/" target="_blank">Vue</t-menu-item>
      <t-menu-item value="6-3" href="https://tdesign.tencent.com/" target="_blank">TDesign</t-menu-item>
      <t-menu-item value="6-4" href="https://www.axios-http.cn/" target="_blank">Axios</t-menu-item>
      <t-menu-item value="6-6" href="https://echarts.apache.org/zh/index.html" target="_blank">Echarts</t-menu-item>
      <t-menu-item value="6-7" href="https://pinia.vuejs.org/zh/" target="_blank">Pinia</t-menu-item>
    </t-submenu>


    <t-submenu v-if="!show1200 && show800" class="submenu" title="更多" value="7">
      <t-submenu class="submenu" title="技术服务" value="7-1">
        <t-menu-item value="7-1-1">vue开发</t-menu-item>
        <t-menu-item value="7-1-2">nest开发</t-menu-item>
        <t-menu-item value="7-1-3">授权对象</t-menu-item>
        <t-menu-item value="7-1-4">更新日志</t-menu-item>
        <t-menu-item value="7-1-5">开发文档</t-menu-item>
        <t-menu-item value="7-1-6">版权声明</t-menu-item>
        <t-menu-item value="7-1-7">隐私政策</t-menu-item>
        <t-menu-item value="7-1-8">常见问题</t-menu-item>
      </t-submenu>
      <t-submenu class="submenu" title="巨人肩膀" value="7-2">
        <t-menu-item value="7-2-1">Nest.js</t-menu-item>
        <t-menu-item value="7-2-2">Vue</t-menu-item>
        <t-menu-item value="6-3">TDesign</t-menu-item>
        <t-menu-item value="6-4">Axios</t-menu-item>
        <t-menu-item value="6-5">Mysql</t-menu-item>
        <t-menu-item value="6-6">Echarts</t-menu-item>
        <t-menu-item value="6-7">Postman</t-menu-item>
        <t-menu-item value="6-8">Navicat</t-menu-item>
      </t-submenu>
      <t-submenu v-if="!show1000" class="submenu" title="云产品" value="7-3">
        <t-menu-item value="1-1">系统介绍</t-menu-item>
        <t-menu-item value="1-2">授权原理</t-menu-item>
        <t-menu-item value="1-3">授权对象</t-menu-item>
        <t-menu-item value="1-4">更新日志</t-menu-item>
        <t-menu-item value="1-5">开发文档</t-menu-item>
        <t-menu-item value="1-6">版权声明</t-menu-item>
        <t-menu-item value="1-7">隐私政策</t-menu-item>
        <t-menu-item value="1-8">常见问题</t-menu-item>
      </t-submenu>
      <t-submenu v-if="!show800" class="submenu" title="关于系统" value="1">
        <t-menu-item value="1-1">系统介绍</t-menu-item>
        <t-menu-item value="1-2">授权原理</t-menu-item>
        <t-menu-item value="1-3">授权对象</t-menu-item>
        <t-menu-item value="1-4">更新日志</t-menu-item>
        <t-menu-item value="1-5">开发文档</t-menu-item>
        <t-menu-item value="1-6">版权声明</t-menu-item>
        <t-menu-item value="1-7">隐私政策</t-menu-item>
        <t-menu-item value="1-8">常见问题</t-menu-item>
      </t-submenu>
      <t-menu-item v-if="!show1000" class="submenu" value="2">应用市场</t-menu-item>
      <t-submenu v-if="!show1000" class="submenu" title="官方账号" value="3">
        <t-menu-item value="3-1">CSDN</t-menu-item>
        <t-menu-item value="3-2">bilibili</t-menu-item>
        <t-menu-item value="3-3">小红书</t-menu-item>
      </t-submenu>
    </t-submenu>


    <template #operations>

      <!--搜索框-->
      <Search />
      <!--搜索框-->

      <!--登录注册-->
      <t-button v-if="!isLogin && show800" theme="primary">
        注册
      </t-button>
      <t-button v-if="!isLogin && show800" variant="text">
        登录
      </t-button>
      <!--登录注册-->

      <!--用户中心-->
      <t-button variant="text" v-if="isLogin">
        <UserCircleIcon />
      </t-button>
      <!--登录注册-->


      <!--主题样式组件-->
      <t-button variant="text" @click="themeMode.change()">
        <ModeLightIcon v-if="themeMode.isLight" />
        <ModeDarkIcon v-else/>
      </t-button>
      <!--主题样式组件-->

      <!--更多-->
      <t-dropdown v-if="!show800" :max-height="400" :options="options" direction="left" trigger="click">
        <t-button variant="text">
          <ellipsis-icon />
        </t-button>
      </t-dropdown>
      <!--更多-->

    </template>

  </t-head-menu>


</template>
<style lang="less" scoped>
.container {
  padding: 0 10px;

  .logo {
    margin-left: 20px;
    cursor: pointer;
  }

  .submenu {
    font-weight: bold;
  }
}


.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}

.t-demo-menu--dark {
  .t-button {
    color: #fff;

    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}
</style>
<script lang="ts" setup>
import { EllipsisIcon, ModeDarkIcon, ModeLightIcon, UserCircleIcon } from "tdesign-icons-vue-next"
import { computed, ref } from "vue"
import { options } from "@/components/search/options"
import { useWindowsWidthStore } from "@/store/windowsWidth"
import { useThemeModeStore } from "@/store/themeMode"
import Search from "@/components/search/Search.vue"
import router from "@/router"

const themeMode: any = useThemeModeStore()
const store = useWindowsWidthStore()

const show1200 = computed(() => {
  return store.windowsWidth >= 1200
})
const show1000 = computed(() => {
  return store.windowsWidth >= 1000
})
const show800 = computed(() => {
  return store.windowsWidth >= 800
})
// 是否登录
const isLogin = ref(true)

localStorage.setItem("isLoginUid", "true")
const csx = localStorage.getItem("isLogin")

console.log(typeof csx)




</script>
